<template>
    <div style=" height: 300px;">
        <el-carousel :interval="3000" arrow="always" class="sweperSty" v-if="(swiperList[0] != null)">
            <el-carousel-item class="sewperItem" v-for="(item, index) in swiperList" :key="index">
                <img :src="item.drawingUrl" class="simgSty">
            </el-carousel-item>
        </el-carousel>
    </div>


    <!-- <div class="searchBox">
        <div class="search flex_str">
            <el-input class="iptSty" placeholder="请输入关键词搜索" v-model="serachName" @keyup.enter.native="searchBtn"></el-input>
            <div class="rebBgSty flex_cen" @click="searchBtn">
                <img src="@/assets/img/search.png" class="search_img">
            </div>
        </div>
    </div> -->
    <div class="search  flex_str">
        <div class="searchBg flex_str">
            <div class="flex_cen locationSty">
                <el-cascader v-model="city" :options="options" :props="props" @change="handleChange" placeholder="定位"
                    :show-all-levels="false" />
            </div>
            <el-input placeholder="请输入关键词搜索" class="iptSty" v-model="cadName"
                @keyup.enter.native="goSearchIndex"></el-input>
        </div>
        <div class="search_icon_bg flex_cen" @click="goSearchIndex">
            <img src="@/assets/img/search.png" class="searchSty" />
        </div>
    </div>


    <div class="detailBox flex_str_clo">
        <div class="detail_img_box flex_cen_column">
            <div class="houseInfoSty flex_str">
                <div class="infoItemSty">定位: {{ houseDetail.position }}</div>
                <div class="infoItemSty">小区名: {{ houseDetail.communityName }}</div>
                <div class="infoItemSty">备案号: {{ houseDetail.recordName }}</div>
            </div>
            <div class="houseInfoSty flex_str">
                <div class="infoItemSty">建筑面积: {{ houseDetail.constructionArea }}</div>
                <div class="infoItemSty">楼栋号: {{ houseDetail.buildingNo }}</div>
            </div>
            <div class="imgBoxSty">
                <img :src="currentImgUrl" class="imgSty" ref="currentImgRef" />
            </div>
            <div class="imgTabSty flex_ard">
                <div class="tabItemSty" v-for="(item, index) in fileImageUrlList" :key="index"
                    @click="selectImg(item.name, item.imageUrlList)"
                    :style="imgTabName == item.name ? 'border-bottom: 2px solid #CB0018;' : ''">{{ item.name }}</div>
            </div>
            <el-scrollbar>
                <div class="scrollbar-flex-content">
                    <div class="flex_str">
                        <img :src="item" class="imgsSty" v-for="(item, index) in imgUrlArr" :key="index"
                            @click="selctImg(item)">
                    </div>
                </div>
            </el-scrollbar>

            <div class="flex_cen">
                <img src="@/assets/img/Collection.png" class="icon_sty" @click="shouCangFun" v-if="!houseDetail.favorite">
                <div style="margin-right: 50px;" v-if="!houseDetail.favorite">收藏</div>

                <img src="@/assets/img/yishoucang.png" class="icon_sty" @click="quXiaoSh" v-if="houseDetail.favorite == 1">
                <div style="margin-right: 50px;" v-if="houseDetail.favorite == 1">已收藏</div>

                <!-- <img src="@/assets/img/share.png" class="icon_sty">
                        <div style="margin-right: 50px;">分享</div> -->
                <img src="@/assets/img/error.png" class="icon_sty" @click="isShow = true">
                <div @click="isShow = true">纠错</div>
            </div>
        </div>
        <div class="room_txt">
            <div class="txt_title">
                {{ houseDetail.communityName }}相关文件图片下载
            </div>
            <div class="user">
                <div class="flex_str_clo">
                    <img :src="houseDetail.authorImage ? houseDetail.authorImage : userImg" class="userImgSty" />
                    <!-- <div>tel: {{ houseDetail.authorMobile || '暂无' }}</div> -->
                </div>
                <div class="flex_btn">
                    <div class="idSty" :title="houseDetail.id">ID: {{ houseDetail.id }}</div>
                    <!-- <div class="copySty" @click="copyId(houseDetail.id)" id="houseId">复制</div> -->
                </div>
                <div class="flex_btn" style="margin: 4px 0;">
                    <div class="flex_btn">
                        <div>浏览次数:</div>
                        <div style="font-size: 16px;color: #666;margin-left: 10px;">{{ houseDetail.browseNum || 0 }}
                        </div>
                    </div>
                    <div class="flex_btn">
                        <div>下载次数:</div>
                        <div style="font-size: 16px;color: #666;margin-left: 10px;">{{ houseDetail.downloadNum || 0 }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="lineSty"></div>
            <div class="fileItem" v-for="(item, index) in houseDetail.houseFileList" :key="index">
                <div class="fileName">{{ item.typeName }}</div>
                <div class="flex_btn" v-if="item.createTime">
                    <div>创建时间: </div>
                    <div>{{ item.createTime }}</div>
                </div>
                <div class="flex_btn">
                    <div>文件大小: </div>
                    <div>{{ item.fileSize }}</div>
                </div>
                <div class="flex_btn" v-if="item.cadVersion">
                    <div>cad版本: </div>
                    <div>{{ item.cadVersion }}</div>
                </div>
                <div class="flex_btn">
                    <div class="flex_btn">
                        <div>价格:</div>
                        <div>{{ item.price }}户币</div>
                    </div>
                    <div class="flex_btn">
                        <div>会员专享价:</div>
                        <div> <span style="color: #CB0018;">{{ item.vipPrice }}</span>户币</div>
                    </div>
                </div>
                <div class="dowlond"
                    @click="isLogin(houseDetail.id, item.id, houseDetail.communityName, item.typeName, item.price, item.vipPrice)">
                    立即下载</div>
                <div class="lineSty"></div>
            </div>

        </div>
    </div>

    <div class="footer_sty">
        <div style="margin-bottom: 10px;">同小区户型图</div>
        <div class="recommend_list_sty">
            <div class="recommend_item_sty" v-for="(item, index) in saveHouse" :key="index" @click="saveClick(item.id)"
                v-if="saveHouse.length != 0">
                <div class="imgBg">
                    <img :src="item.firstImage" style="height: 136px;">
                </div>
                <div class="tuijianNameSty" :title="item.communityName + item.buildingNo">{{ item.communityName }} - {{
                    item.buildingNo }}</div>
            </div>
            <div style="width: 100%;" class="flex_cen_column" v-else>
                <img src="@/assets/img/empty.png" class="noneImgSty">
            </div>
        </div>
        <div class="flex_cen" style="width: 100%;">
            <el-config-provider :locale="locale">
                <el-pagination v-model:current-page="saveParams.current" v-model:page-size="saveParams.size"
                    :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="saveTotal" @size-change="getSaveHouseFun"
                    @current-change="getSaveHouseFun" />
            </el-config-provider>

        </div>
    </div>
    <diaCom v-model="isShow" @close="diaClose"></diaCom>
    <diaDown v-model="isShowDown" :propData="dialogData" @close="isShowDown = false"></diaDown>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { getHouseDetaiApi, generalAssetsApi, getSaveHouseApi, getSwiperApi, shouCangApi, quXiaoshouCangApi } from '@/api/index/index'
import { useRouter } from 'vue-router';
// @ts-ignore
import useClipboard from 'vue-clipboard3'
import { ElMessage, ElLoading } from 'element-plus';
import userImg from '@/assets/img/avater.png'
import diaCom from './dialog.vue'
import diaDown from './dialogDowm.vue'
import cityData from '@/utils/city.json'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = zhCn
const saveTotal = ref(0)
const cadName = ref<string>('')
// import 'viewerjs/dist/viewer.css'
// import { api as viewerApi } from "v-viewer";
const city = ref<any>('定位')
const options = cityData
const props = {
    expandTrigger: 'hover',
    label: 'name',
    value: 'name',
    checkStrictly: true
}
// 显示纠错框
const isShow = ref<Boolean>(false)
const currentImgRef = ref<HTMLBodyElement>()
const router = useRouter()
const houseDetail = ref<any>([])
const fileImageUrlList = ref<any>([])

const currentImgUrl = ref('')
const saveHouse = ref<any>([])
const imgTabName = ref<any>('')
const imgUrlArr = ref<any>([])
const serachName = ref<any>('')
const changeHouseId = ref<any>(null)
const dialogData = ref<any>({
    houseId: 0,
    fileId: 0,
    houseName: '',
    fileName: '',
    price: 0,
    vipPrice: 0
})
const isShowDown = ref(false)
const diaClose = () => {
    isShow.value = false
}
const goSearchIndex = () => {
    let cityName = ''
    if (city.value == '定位') {
        cityName = ''
    } else {
        city.value.map((v: any) => {
            cityName += v
        })
    }

    // router.push({ path: '/room/list'})
    router.push({ path: '/room/list', query: { position: cityName, keyword: cadName.value } })
}
const handleChange = (e: any) => {
    city.value = e
}
const swiperList = ref<any>([])

const shouCangFun = () => {
    shouCangApi(changeHouseId.value ? changeHouseId.value : router.currentRoute.value.query.id).then((res: any) => {
        if (res.status == 200) {
            ElMessage.success('收藏成功')
            getDetail(changeHouseId.value)
        }
    })
}
const quXiaoSh = () => {
    quXiaoshouCangApi(changeHouseId.value ? changeHouseId.value : router.currentRoute.value.query.id).then((res: any) => {
        if (res.status == 200) {
            ElMessage.success('取消成功')
            getDetail(changeHouseId.value)
        }
    })
}
const searchBtn = () => {
    router.push({ path: '/room/list', query: { name: serachName.value } })
}
const selectImg = (name: string, url: any) => {
    imgTabName.value = name
    imgUrlArr.value = url
}
const isLogin = (houseId: any, fileId: any, name1: any, name2: any, price: any, vipPrice: any) => {
    generalAssetsApi().then((res: any) => {
        if (res.data.surplusCoin < price) {
            ElMessage.warning('户币不足，请及时充值')
        } else if (res.data.status !== 401) {
            dialogData.value.houseId = houseId
            dialogData.value.fileId = fileId
            dialogData.value.houseName = name1
            dialogData.value.fileName = name2
            dialogData.value.price = price
            dialogData.value.vipPrice = vipPrice
            isShowDown.value = true

        }
    })
}
const getDetail = (id?: any) => {
    getHouseDetaiApi({ id: id ? id : router.currentRoute.value.query.id }).then((res: any) => {
        houseDetail.value = res.data
        currentImgUrl.value = res.data.imageUrlList[0]
        fileImageUrlList.value = res.data.fileImageUrlList
        selectImg(res.data.fileImageUrlList[0].name, res.data.fileImageUrlList[0].imageUrlList)
    })
}
const { toClipboard } = useClipboard()
const selctImg = (url: string) => {
    currentImgUrl.value = url
}
const copyId = async (id: any) => {
    try {
        // 复制
        await toClipboard(id)
        ElMessage.success('复制成功!')
        // 复制成功
    } catch (e) {
        // 复制失败
        ElMessage.warning('改浏览器不支持复制功能!')
    }
}
const saveParams = ref({
    id: router.currentRoute.value.query.id,
    current: 1,
    size: 10
})
const getSaveHouseFun = (id?: any) => {
    if(parseInt(id)>100){
        saveParams.value.id = id
    }
    getSaveHouseApi(saveParams.value).then((res: any) => {
        saveHouse.value = res.data.records
        saveTotal.value = res.data.total
    })
}
const saveClick = (id: any) => {
    changeHouseId.value = id
    getDetail(id)
    getSaveHouseFun(id)
}
const getSwierImg = () => {
    getSwiperApi({ type: 2 }).then((res: any) => {
        swiperList.value = res.data
    })
}
getSwierImg()
getDetail()
getSaveHouseFun()
</script>

<style scoped>
:deep(.el-input__wrapper) {
    background: none;
    box-shadow: 0 0 0 0 #fff;
}
:deep(.el-pagination__sizes) {
    display: none !important;
}
.imgBg{
    width: 85%;
    height: 136px;
    background: #000;
    overflow: hidden;
}
.search {
    position: absolute;
    top: 150px;
    left: 20%;
    width: 60%;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
}

/* .search {
    background-color: #fff;
    height: 60px;
   
} */

.searchBg {
    width: 90%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #EDEBEA;
    height: 60px;
}


.search_icon_bg {
    background: #FA9E42;
    height: 60px;
    width: 100px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.searchSty {
    width: 40px;
    height: 40px;
}

.noneImgSty {
    width: 20%;
}

.locationSty {
    width: 150px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    align-items: center;
    border-right: 1px solid #F8F7F0;
}

.houseInfoSty {
    width: 900px;
}

.infoItemSty {
    width: 280px;
    margin-right: 20px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.imgBoxSty {
    position: relative;
}

.imgBtnSty {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;

}

.scrollbar-flex-content {
    display: flex;
    width: 1000px;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
}

.idSty {
    width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.footer_item_sty {
    width: 20%;
    height: 180px;
    margin: 20px;
}

.item_name {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    color: #fff;
    font-size: 18px;
    padding: 4px 0;
    background-color: rgba(0, 0, 0, 0.5);

}

.footer_sty {
    width: 80%;
    background-color: #fff;
    margin: 40px 0;
    margin-left: 10%;
    padding: 20px 40px;
}

.recommend_list_sty {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 100%;
}

.recommend_item_sty {
    width: 19%;
    text-align: center;
    margin-bottom: 12px;
    margin-right: 1%;
}

.imgTabSty {
    width: 100%;
}

.tabItemSty {
    padding: 10px 14px;
    font-weight: 700;
    border-bottom: 2px solid #fff;
}

.tuijianNameSty {
    width:90%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.icon_sty {
    width: 31px;
    margin-right: 10px;
}

.dowlond {
    width: 220px;
    text-align: center;
    margin: 0 auto;
    background-color: #CB0018;
    color: #fff;
    padding: 6px 0;
    margin-top: 10px;
    border-radius: 20px;
}

.fileName {
    font-size: 20px;
}

.fileItem {
    padding: 0 20px;
    font-size: 16px;
}

.copySty {
    width: 80px;
    text-align: center;
    color: #fff;
    background: #CB0018;
    border-radius: 20px;
}

.lineSty {
    width: 100%;
    border-bottom: 4px solid #f0f0f0;
    margin: 10px 0;
}

.user {
    font-size: 18px;
    padding: 0 20px;
}

.userImgSty {
    width: 46px;
    border-radius: 23px;
}

.txt_title {
    width: 100%;
    text-align: center;
    font-weight: 700;
    margin-bottom: 10px;
    ;
}

.room_txt {
    width: 400px;
    min-height: 600px;
}

.detail_img_box {
    width: 1000px;

}

.imgSty {
    width: 900px;
    /* height: 500px; */
    margin-top: 10px;
}

.imgsSty {
    width: 150px;
    height: 92px;
    margin: 20px;
    margin-top: 40px;
}

.detailBox {
    width: 80%;
    background-color: #fff;
    min-height: 300px;
    margin: 40px 0;
    margin-left: 10%;
    padding: 20px 0;
}

.sweperSty {
    height: 300px;
}

.sewperItem {
    width: 100vw;
    height: 300px;
}

.simgSty {
    width: 100vw;
    height: 300px;
}

.rebBgSty {
    width: 120px;
    height: 100%;
    background-color: #CB0018;
}

.iptSty {
    height: 50px;
}
</style>